<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>设备列表</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" type="text/css" href="css/main.css" />
  <link rel="stylesheet" type="text/css" href="../mobile/js/layer/css/layui.css" />
  <script src="../mobile/js/jquery-1.9.1.js"></script>
  <script src="../mobile/js/layer/layui.js"></script>
  <script src="./js/common.js"></script>
  <script type="text/javascript">
      //访问是否登录,ajax同步请求
      logins(); 
  </script>
  <style type="text/css">
    .layui-table-cell{
      height: 50px;
      line-height: 50px;
    }
  </style>
</head>
<body>
<div style="margin: -30px 20px 20px 20px;">  
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  <legend>设备列表</legend>
</fieldset>
<blockquote class="layui-elem-quote">
    <div class="layui-inline">
        <input class="layui-input" name="key" id="key" placeholder="请输入设备号">
    </div>&nbsp;

    <button class="layui-btn btns" id="search" data-type="reload"><i class="layui-icon" style="color: #fff">&#xe615;</i>搜索</button>
    <!-- <a href="http://www.xiyiji.com/uploads/QRcodeDevice/QRcodeDevice.rar"><button class="layui-btn" style="border: 1px solid #35C4F9;background: none;color:#35C4F9"><i class="layui-icon" style="color: #35C4F9">&#xe601;</i>下载二维码</button></a> -->
    <button class="layui-btn btns" onclick="window.location.href='devicelist_add.html'"><i class="layui-icon" style="color: #fff">&#xe608;</i> 添加</button>
    <button class="layui-btn btns_del" id="delAll"><i class="layui-icon" style="color: #fff">&#xe640;</i>批量删除</button>
    <br>
    <br>
  <span class="layui-form" style="display: inline-block;" id="agents1">
    <select id="agent1" lay-verify="required">
      <option>一级代理</option>
    </select>
  </span>
  <div class="layui-inline">
    <label>比例1</label>
    <div class="layui-input-inline" style="width: 100px;">
      <input type="text" name="yongjin1" id="yongjin1" autocomplete="on" class="layui-input">
    </div>
  </div>
  <span id="infos" style="display: none">
  <span class="layui-form" style="display: inline-block;" id="agents2">
    <select id="agent2" lay-verify="required">
      <option>二级代理</option>
    </select>
  </span>
    <div class="layui-inline">
    <label>比例2</label>
    <div class="layui-input-inline" style="width: 100px;">
      <input type="text" name="yongjin2" id="yongjin2" autocomplete="on" class="layui-input">
    </div>
    </div>
    <button class="layui-btn" id="edit" style="background:#5FB878;" ><i class="layui-icon" style="color: #fff">&#xe642;</i>确定</button>
    </span>
   <!--  <button class="layui-btn btns" onclick="x_admin_show('添加系统设置','./setting_add.html',600,450)"><i class="layui-icon" style="color: #fff">&#xe608;</i> 添加</button> -->
</blockquote>
<table class="layui-hide" id="list" lay-filter="list"></table>
</div>
<!-- <script type="text/html" id="status">
    {{# if(d.status==1){ }}
       <input type="checkbox" name="status" lay-skin="switch" lay-text="开启|关闭" lay-filter="status" checked value="{{d.id}}">
    {{# }else{  }}
       <input type="checkbox" name="status" lay-skin="switch" lay-filter="status" lay-text="开启|关闭" value="{{d.id}}">
    {{# } }}
</script> -->
<script type="text/html" id="code">
      <img width="50" height="50" src="{{d.QRcode}}">
</script>
<script type="text/html" id="action">
<i class="layui-icon layui-icon-face-smile"></i>
    <a href="user_id={{d.device_id}}" title="编辑"><i class="layui-icon" style="color: #5FB878;font-size: 25px;">&#xe642;</i></a>
    <a lay-event="del" title="删除"><i class="layui-icon" style="color:#FF5722;font-size: 25px;">&#xe640;</i></a>
</script>
<script>
var aid = ""; 
var bid = "";
var urls = url+"/admin/device/agent1";
var urlss = url+"/admin/device/agent2";
//短信平台名称显示
$.ajax({
  type:'get',
  dataType: 'json',
  url:urls,
  data:{},
  success:function(msg){
     //一级代理
     $.each(msg.data, function(i, item) {
         $("#agent1").append("<option value='" + item.id + "'>" + item.agent_name + "</option>");
         $("#agents1 .layui-anim-upbit").append("<dd lay-value='" + item.id + "'>" + item.agent_name + "</dd>");
     });
     $('#agents1 .layui-anim').find('dd').click(function(){
       //一级代理选中获取内容
         var thisVal = $(this).html();
         aid = $(this).attr('lay-value');
         $('#agents1 .layui-unselect').val(thisVal);
         $(this).addClass('layui-this').siblings().removeClass('layui-this');
         if(aid == "一级代理" || aid==""){
            $("#infos").hide();
            layer.alert('请选择一级代理内容！',{icon:5});
            return false;
         }else{

           //二级代理
           $("#infos").show();
         $.get(urlss,{id:aid},function(msgs){
          var msgs = JSON.parse(msgs);
              $("#agents2 .layui-anim-upbit").find('dd').remove();
              $('#agents2').find('.layui-input').val('二级代理');
          $.each(msgs.datas, function(i, items) {
                $("#agent2").append("<option value='" + items.id + "'>" + items.agent_name + "</option>");
                $("#agents2 .layui-anim-upbit").append("<dd lay-value='" + items.id + "'>" + items.agent_name + "</dd>");

            });

         //二级代理选中获取内容   
           $('#agents2>div>dl').find('dd').click(function(){
               var Tval = $(this).html();
               bid = $(this).attr('lay-value');
               $('#agents2').find('.layui-input').val(Tval);
               $(this).addClass('layui-this').siblings().removeClass('layui-this');
           })

           //二级代理悬停变换选颜色
           $('#agents2>div>dl').find('dd').hover(function(){
               $(this).addClass('layui-this').siblings().removeClass('layui-this');
            })
         });
          $.ajaxSettings.async = false;
      }
     })

     //一级代理悬停变换选颜色
     $('#agents1 .layui-anim').find('dd').hover(function(){
        $(this).addClass('layui-this').siblings().removeClass('layui-this');
     })
  },
  error:function(){
     layer.alert(msg.infomsg, {icon: 5});     
  }
})  

layui.use(['table','form'], function() {
      var table = layui.table,form = layui.form,$ = layui.jquery;
      // var urls = url + "/admin/centerapi/devicelistcenter";
      var urls = url + "/admin/device/devicelists";
      var tableIn = table.render({
          elem: '#list',
          url: urls,
          method: 'post',
          page: true,
          where: {},
          cols: [[
              {checkbox:true,fixed: true},
              {field: 'device_id', title: '编号', fixed: true,width:100,align: 'center', },
              {field: 'device_sn', title: '设备号',align: 'center',width:200},
              {field: 'agent1', title: '一级代理',align: 'center',width:100},
              {field: 'yongjin1', title: '一级拥金比例',align: 'center',width:120},
              {field: 'agent2', title: '二级代理',align: 'center',width:100},
              {field: 'yongjin2', title: '二级拥金比例',align: 'center',width:120},
              {field: 'agent3', title: '三级代理',align: 'center',width:100},
              {field: 'yongjin3', title: '三级拥金比例',align: 'center',width:120},
              {field: 'agent4', title: '四级代理',align: 'center',width:100},
              {field: 'yongjin4', title: '四级拥金比例',align: 'center',width:120},
              {field: 'addtime', title: '日期',width:150,align: 'center', },
              {field: 'state', title: '待机状态',align: 'center',width:100},
              // {field: 'ProductKey', title: 'ProductKey',width:150,align: 'center', },
              // {title: 'QRcode', width: 160, align: 'center', toolbar: '#code'},
             /* {field: 'QRcode', title: '二维码',width:200,align: 'center', },*/
            /*  {title: '启用状态',width:100, align: 'center', toolbar: '#status'},*/
              {title: '操作', width: 160, align: 'center', toolbar: '#action'}
          ]],
          limit: 10,//每页默认显示的数量
          done:function(msg){
              hoverOpenImg();//显示大图
              $('table tr').on('click',function(){
                   $('table tr').css('background','');
                   $(this).css('background','<%=PropKit.use("config.properties").get("table_color")%>');
              });
              if (msg.codes == 0) {
                layer.alert(msg.infomsg,{time:1000,icon:5});
              } 
          }
      });
      //图片放大
      function hoverOpenImg(){
        var img_show = null; // tips提示
        $('td img').hover(function(){
            var img = "<img class='img_msg' src='"+$(this).attr('src')+"' style='width:130px;padding:10px 5px;' />";
            img_show = layer.tips(img, this,{
                tips:[2, 'rgba(41,41,41,.5)']
                ,area: ['170px']
            });
        },function(){
            layer.close(img_show);
        });
        $('td img').attr('style','max-width:70px');
      }

     //修改状态
      form.on('switch(status)', function(obj){
            var urls = "/admin/config/status";
            loading =layer.load(1, {shade: [0.1,'#fff']});
            var id = this.value;
            var status = obj.elem.checked===true?1:0;
            $.post(urls,{'id':id,'status':status},function(msg) {
                  layer.close(loading);
                  var msg = JSON.parse(msg);
                  if(msg.code == 1){
                      layer.msg(msg.infomsg,{time:1000,icon:6});
                      tableIn.reload();
                  }else{
                      layer.msg(msg.infomsg,{time:1000,icon:5});
                }
            });
      });

      
      //单条记录删除
      table.on('tool(list)', function(obj) {
            var urls = "/admin/device/deldevice";
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('您确定要删除该记录吗？', function(index){
                    var loading = layer.load(1, {shade: [0.1, '#fff']});
                    $.post(urls,{device_id:data.device_id},function(msg){
                        layer.close(loading);
                        var msg = JSON.parse(msg);
                        if(msg.code == 1){
                            layer.msg(msg.infomsg,{time:1000,icon:6});
                            tableIn.reload();
                        }else{
                            layer.msg(msg.infomsg,{time:1000,icon:5});
                        }
                    });
                    layer.close(index);
                });
            }
        });

      //批量删除
      $("#delAll").click(function(){
          var urls = "/admin/device/delalldevice";
          layer.confirm('确认要删除选中信息吗？',{icon: 3},function(index) {
            layer.close(index);
            var checkStatus = table.checkStatus('list'); //test即为参数id设定的值
            var ids = [];
            $(checkStatus.data).each(function (i, o) {
                ids.push(o.device_id);
            });
            var loading = layer.load(1, {shade: [0.1, '#fff']});
            $.post(urls,{device_id:ids},function(msg){
                layer.close(loading);
                var msg = JSON.parse(msg);
                if (msg.code == 1) {
                    layer.msg(msg.infomsg, {time: 1000, icon: 6});
                    tableIn.reload();
                }else{
                    layer.msg(msg.infomsg, {time: 1000, icon: 5});
                }
            });
          })
      });

      //编辑
      $("#edit").click(function(){
         if(aid == "一级代理" || aid==""){
          layer.alert('请选择一级代理内容！',{icon:0});
            return false;
         }
         // var urls = "/admin/centerapi/editagentcenter";
         var urls = "/admin/device/editagent";
         var checkStatus = table.checkStatus('list'); //test即为参数id设定的值
         var ids = [];
         $(checkStatus.data).each(function (i, o) {
                ids.push(o.device_id);
         });
         if(ids == ""){
            layer.alert('请选择设备列表选择框！',{icon:0});
            return false;
         }
         //一级佣金比例
         var yongjin1 = $('#yongjin1').val();
         var reg = /^(-?\d+)(\.\d{1,2})?$/;
         if (yongjin1 <= 0 ||  !reg.test(yongjin1)) {
              layer.alert('请填写一级佣金比例,不能小于或等于并且超过2位小数！',{icon:0});
              return false;
         }
         //二级拥挤比例
         if (bid != "" && bid != null) {
            var yongjin2 = $('#yongjin2').val();
            if (yongjin2 <= 0 ||  !reg.test(yongjin2)) {
              layer.alert('请填写二级佣金比例,不能小于或等于并且超过2位小数！',{icon:0});
              return false;
            }
            
            if (parseFloat(yongjin2) >= parseFloat(yongjin1)) {
              layer.alert('二级佣金比例不能大于或等于一级佣金比例',{icon:0});
              return false;
            }

         }

         $.post(urls,{ids:ids,agent1:aid,agent2:bid,yongjin1:yongjin1,yongjin2:yongjin2},function(msg){
          var msg = JSON.parse(msg);
          if (msg.code == 1) {
              layer.msg(msg.infomsg, {time: 2000, icon: 6});
                  tableIn.reload();
            }else{
                layer.msg(msg.infomsg, {time: 2000, icon: 5});
            }
         });
         return false;
      })
       
      //搜索内容
      $('#search').on('click', function() {
            var key = $('#key').val();
            if($.trim(key)==='') {
                layer.msg('请输入关键字！',{icon:0});
                return;
            }
            tableIn.reload({
                where: {key: key}
            });
       });
});
</script>
</body>
</html>